@mixin modalBase($width) {
  width: $width;
  padding: 20px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

@mixin fadeIn($width: 300px, $duration: 0.3s) {
  @include modalBase($width);
  animation: fadeInScale $duration ease-out;
  @at-root {
    @keyframes fadeInScale {
      from {
        opacity: 0;
        transform: scale(0.8);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }
  }
}

@mixin slideDown($width: 300px, $duration: 0.4s) {
  @include modalBase($width);
  animation: slideDown $duration ease-out;
  @at-root {
    @keyframes slideDown {
      from {
        transform: translateY(-50px);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
  }
}

@mixin bounceUp($width: 300px, $duration: 0.5s) {
  @include modalBase($width);
  animation: bounceUp $duration ease-out;
  @at-root {
    @keyframes bounceUp {
      0% {
        transform: translateY(100px);
        opacity: 0;
      }
      60% {
        transform: translateY(-10px);
        opacity: 1;
      }
      80% {
        transform: translateY(5px);
      }
      100% {
        transform: translateY(0);
      }
    }
  }
}

@mixin rotateIn($width: 300px, $duration: 0.4s) {
  @include modalBase($width);
  animation: rotateIn $duration ease-out;
  @at-root {
    @keyframes rotateIn {
      from {
        transform: rotate(-20deg) scale(0.5);
        opacity: 0;
      }
      to {
        transform: rotate(0) scale(1);
        opacity: 1;
      }
    }
  }
}

@mixin blurIn($width: 300px, $duration: 0.4s) {
  @include modalBase($width);
  animation: blurIn $duration ease-out;
  @at-root {
    @keyframes blurIn {
      from {
        filter: blur(10px);
        opacity: 0;
      }
      to {
        filter: blur(0);
        opacity: 1;
      }
    }
  }
}
